<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>index</title>
</head>
<body>
<div id="app">

  姓: <input type="text" v-model="firstName"><br>
  名: <input type="text" v-model="lastName"><br>
  <span>全名: {{fullName}}</span><br>
  <input type="text" v-model="fullName">

</div>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      firstName: 'bie',
      lastName: 'ge',
      fullName: ''
    },
    mounted() {
      this.fullName = this.firstName + ' ' + this.lastName
    },
    watch: {
      firstName(value) {  // 监听哪个属性, 就写哪个属性的名称,value为变动的值
        console.log('firstName变动为: ' + value)
        this.fullName = value + ' ' + this.lastName
      },
      lastName(value) {
        console.log('lastName变动为: ' + value)
        this.fullName = this.firstName + ' ' + value
      },
      fullName(value) {
        console.log('fullName变动为: ' + value)
        const fnames = value.split(' ')
        this.firstName = fnames[0]
        this.lastName = fnames[1]
      }
    }
  })
</script>
</body>
</html>